<template>
	<view class="list" v-if="list.length>0">
		<view class="item" v-for="item in list" :key="item.id" @click="$navTo(item.url)">
			<image :src="item.thumb" mode="widthFix"></image>
			<view class="">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "menu_button",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		}

	}
</script>

<style lang="scss">
	.list {
		padding-bottom: 20upx;
		overflow: hidden;
	}

	.list,
	.item {
		border-radius: 20upx;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.item {
		border-radius: 0;
		justify-content: center;
		padding-top: 20upx;
		text-align: center;
		width: 20%;

		image {
			width: 100%;
		}

		view {
			font-size: 28upx;
			width: 100%;
		}
	}
</style>